<template>
	<!-- 此组件用于显示整套试卷· 
	试卷类型包含
	exam 理论考试
	paper 模拟考试 知识点练习 -->
	<view>
		<!-- 大标题 -->
		<view class="header" id="header">
			<!-- 			<span class="header-button" @click='leave' v-if='!isReviewed && examType=='know' '>暂离</span> -->
			<span v-if="examDetail.exam.type=='exam'"> {{examDetail.exam.name}}</span>
			<span
				v-if="(examDetail.exam.type=='paper' )|| (examDetail.exam.type=='know') || (examDetail.exam.type=='course')">
				{{examDetail.paper.name}}</span>
			<span class="header-button" @click='handleSubmit(1)' v-if='!isReviewed'>交卷</span>
			<!-- <span class="scoreText" v-else>得分：{{examDetail.score}}</span> -->
		</view>
		<!-- 小标题栏 -->
		<view id="subHeader">
			<view class="sub-header" v-if='examDetail.questionList.length>0'>
				<u-tag class="typeTag" :text="queTypeName" mode="dark" shape="circle" />
				<view v-if="examDetail.exam.examTime<=0">不限时</view>
				<u-count-down v-if="(!isReviewed)&&(examDetail.exam.type=='exam')&& (examDetail.exam.examTime>0)"
					:timestamp="examDetail.exam.examTime*60" :show-days="false" @end="end" @change="change">
				</u-count-down>
				<clock v-if="(!isReviewed)&&(examDetail.exam.type=='paper' || (examDetail.exam.type=='course'))"
					ref="myClock" :timeOrigin="parseInt(examDetail.time)">
				</clock>
				<span v-if="examDetail.exam.type=='exam'">第
					{{currentIndex+1}}/{{examDetail.exam.totalQuestion}} 题</span>
				<span v-if="(examDetail.exam.type=='paper' )|| (examDetail.exam.type=='know')">第
					{{currentIndex+1}}/{{examDetail.totalQuestion}} 题</span>
			</view>
		</view>




		<!-- 底部栏 -->
		<view class="footer" id="footer">
			<view class="footer-back" @click='handleChangeCurrentSwiper(-1)'>上一题</view>
			<view class="footer-card" @click="showQuestion = !showQuestion">答题卡</view>
			<view class="footer-right" @click='handleChangeCurrentSwiper(1)'>下一题</view>
		</view>

		<!-- 答题卡弹出层 -->
		<modal v-model="showQuestion">
			<view class='question-modal' :style="{'height': modalHeight}">
				<view class="question-modal-header" id="questionHeader">
					答题卡
				</view>
				<scroll-view scroll-y class="question-modal-body" :style="{'height': modalContentHeight}">
					<!-- <template v-for="(option,subIndex) in queTypeArr"> -->
					<!-- <view class="queTypeName" v-show="queTypeArr[subIndex]>0">{{option.name}}</view> -->

					<view class="queTypeArea">
						<template v-for="(question, index) in examDetail.questionList">
							<!-- <view v-show="question.queType==option.value"> -->

							<!-- 复习状态 -->
							<view v-if='isReviewed'>
								<!-- 1.回答正确 -->
								<view v-if='question.isRight == "Y"'
									class="question-modal-body-item question-modal-body-item-right"
									@click="handleJumpSwiper(index)">{{index + 1 }}</view>
								<!-- 2.回答错误 -->
								<view v-else-if='question.isRight == "N"'
									class="question-modal-body-item question-modal-body-item-failed"
									@click="handleJumpSwiper(index)">{{index + 1 }}</view>
								<!-- 3.未评分 -->
								<view v-else-if='question.isRight == "U"'
									class="question-modal-body-item question-modal-body-item-unScored"
									@click="handleJumpSwiper(index)">{{index + 1 }}</view>
							</view>
							<!-- 非复习状态即考试状态 -->
							<view v-else>
								<!-- 根据是否已经作答增加不同样式 -->
								<view class="question-modal-body-item"
									:class="[question.tempAnswer.length > 0?'question-modal-body-item-select':' question-modal-body-item-unselect']"
									@click="handleJumpSwiper(index)">{{index + 1 }}</view>
								<!-- 			

								<view v-if='question.tempAnswer && question.tempAnswer.length != 0'
									class="question-modal-body-item question-modal-body-item-select"
									@click="handleJumpSwiper(index)">{{index + 1 }}</view>
									
								<view v-else class="question-modal-body-item question-modal-body-item-unselect"
									@click="handleJumpSwiper(index)">
									{{index + 1 }}
								</view> -->
							</view>

							<!-- <u-line color="red" border-style="info"></u-line> -->
							<!-- </view> -->
						</template>
					</view>
					<!-- </template> -->
				</scroll-view>

				<view class="question-modal-foot" id="questionHeader">
					<view v-if="!isReviewed" class="ansBlock">
						<view class="blockItem">
							<view class="block-ansed"></view>
							<view class="">已答</view>
						</view>
						<view class="blockItem">
							<view class="block-unansed"></view>
							<view class="">未答</view>
						</view>
					</view>

					<view v-else class="ansBlock">
						<view class="blockItem">
							<view class="block-right"></view>
							<view class="">答对</view>
						</view>
						<view class="blockItem">
							<view class="block-wrong"></view>
							<view class="">答错</view>
						</view>
						<view class="blockItem">
							<view class="block-unScored"></view>
							<view class="">未评分</view>
						</view>
					</view>
				</view>
			</view>
		</modal>


		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import Modal from './modal.vue'
	import clock from '@/components/clock/clock.vue';
	export default {
		data() {
			return {
				isreadOnly: true,
				quesModules: [],
				areaText: ``, //保存简答题答案
				judgeArr: [{
						name: '正确',
						value: '1'
					},
					{
						name: '错误',
						value: '0'
					}
				],
				queTypeArr: [{
						name: '单选题',
						value: '1',
						be: false,
					},
					{
						name: '多选题',
						value: '2',
						be: false,
					},
					{
						name: '判断题',
						value: '3',
						be: false,
					},
					{
						name: '填空题',
						value: '4',
						be: false,
					},
					{
						name: '简答题',
						value: '5',
						be: false,
					}
				],
				currentIndex: 0,
				swiperHeight: '600px',
				modalHeight: '500px',
				modalContentHeight: '400px',
				showQuestion: false,
				articleEditorValue: '',
				eidtOrFinishValue: '编辑笔记',
				// eidtOrFinish: true,
				editorText: '',
				editor: 'editor',
			}
		},
		filters: {
			// 判断答案状态
			analysisFilter(question) {
				if (question == null) {
					return "暂无解析"
				} else {
					return question
				}
			}
		},
		watch: {
			// 监听currentIndex的变化，改变则提交答案 相同
			currentIndex(newVal, oldVal) {
				let that = this
				if (!this.isReviewed) {
					// 对各题型的答案进行处理
					switch (that.questionList[oldVal].template) {
						case 1:
							// 选择题
							break;
						case 2:
							// 多选题
							// that.questionList[that.currentIndex].tempAnswer = that.questionList[that.currentIndex]
							// 	.dualChooseArr.join(',')
							break;
						case 3:
							// 判断题
							break;
						case 4:
							// 填空题
							that.questionList[oldVal].tempAnswer = that.questionList[oldVal].blankArr.join(
								'||~||') // 数组拼接为字符串
							break;
						case 5:
							that.questionList[oldVal].tempAnswer = JSON.stringify(that.areaText)
							// console.log('000:',that.questionList[oldVal].tempAnswer);
							break;
						default:
					}

					if (this.examDetail.exam.type == 'exam') {
						// 保存答案
						var answerObj = {
							examRecordId: this.examDetail.questionList[oldVal].recordId,
							paperQueId: this.examDetail.questionList[oldVal].id,
							answer: this.examDetail.questionList[oldVal].tempAnswer,
							template: this.examDetail.questionList[oldVal].template
						}

						// 进行答题的api请求
						console.log('answerObj:', oldVal, answerObj);
						this.$api.answerExam(answerObj)
							.then(res => {
								console.log(res);
							})
					} else if (this.examDetail.exam.type == 'paper' || this.examDetail.exam.type == 'know') {
						var answerObj = {
							exerciseId: this.examDetail.exerciseId,
							paperQueId: this.examDetail.questionList[oldVal].id,
							answer: this.examDetail.questionList[oldVal].tempAnswer,
							template: this.examDetail.questionList[oldVal].template
						}

						// 进行答题的api请求
						console.log('answerObj:', oldVal, answerObj);
						this.$api.answerPaper(answerObj)
							.then(res => {
								console.log(res);
							})
					} else {
						return
					}
					// immediate: true,
				}
			}
		},
		computed: {
			// swiperHeight(){
			// 	uni.getSystemInfo({
			// 		success(res) {
			// 			console.log(res);
			// 			return res.windowHeight+'px'
			// 		}
			// 	})
			// },
			// queTypeStore() {
			// 	return this.$store.state.queTypeArr
			// },
			max() {
				return this.examDetail.questionList.length - 1
			},
			queTypeName() {
				switch (this.examDetail.questionList[this.currentIndex].queType) {
					case 1:
						return '单选题'
						break;
					case 2:
						return '多选题'
						break;
					case 3:
						return '判断题'
						break;
					case 4:
						return '填空题'
						break;
					case 5:
						return '简答题'
						break;
					default:
						return '考试题'
				}
			}
		},
		props: {
			isReviewed: {
				type: Boolean,
				default: false
			},
			examDetail: {
				type: Object,
				default: "exam"
			},
			duration: {
				type: [String, Number],
				default: 300
			},
		},
		onLoad() {
			var that = this
			// this.setAnswerHeight()
			if ((!this.isReviewed) && ((this.examDetail.exam.type == 'paper') || (this.examDetail.exam.type ==
					'course'))) {
				this.$refs.myClock.start();
			}
		},
		components: {
			Modal,
			clock
		},
		methods: {
			/*设置题目的高度*/
			setAnswerHeight() {
				let that = this
				let tempHeight = 0
				uni.getSystemInfo({
					//获取手机屏幕高度信息，让swiper的高度和手机屏幕一样高                
					success: function(res) {
						tempHeight = res.windowHeight;
						that.modalHeight = res.windowHeight - uni.upx2px(200) + 'px';
						that.modalContentHeight = res.windowHeight - uni.upx2px(380) + 'px';
						uni.createSelectorQuery().in(that).select("#header").fields({
							size: true,
							scrollOffset: true
						}, (data) => {
							console.log('data', data);
							tempHeight -= data.height;
							uni.createSelectorQuery().in(that).select("#subHeader").fields({
								size: true,
								scrollOffset: true
							}, (data) => {
								tempHeight -= data.height;
								uni.createSelectorQuery().in(that).select("#footer").fields({
									size: true,
									scrollOffset: true
								}, (data) => {
									tempHeight -= data.height;
									that.swiperHeight = tempHeight + 'px';
								}).exec();
							}).exec();
						}).exec();
					}
				});
			},
			/* 跳转指定题目 */
			handleJumpSwiper(index) {
				this.currentIndex = index
				this.showQuestion = false
			},
			change(timestamp) {
				// var that = this
				if (timestamp == 30) {
					this.$refs.uToast.show({
						title: '考试只剩余30s，请注意时间',
						type: 'warning',
						duration: 2000,
						position: 'top'
					})
				}
				// this.$forceUpdate()
			},
			end() {
				this.$refs.uToast.show({
					title: '考试时间结束，已自动交卷',
					type: 'warning'
				})
				setTimeout(() => {
					this.handleSubmit(0)
				}, 2000)
			},
			textInput(e) {
				this.areaText = e.detail.value
				// console.log(e.detail.value)
			},
			/* 滑动题目 */
			handleSwiperChanged(event) {
				console.log("event.detail:", event.detail)
				this.currentIndex = event.detail.current
			},
			/* 调用上一页，下一页 */
			handleChangeCurrentSwiper(operation) {
				let max = this.examDetail.questionList.length - 1
				let min = 0
				// 进行翻页
				if ((this.currentIndex > min && operation < 0) || (this.currentIndex < max && operation > 0)) {
					this.currentIndex += operation
					// console.log(this.currentIndex)
				}
			},
			/* 选择答案（单选）*/
			chooseSolution(question, option) {
				if (!this.isReviewed) {
					// tempAnswer为学生答案
					question.tempAnswer = option.optLetter
					// 强制刷新更新视图
					this.$forceUpdate()
					// this.examDetail.questionList[this.currentIndex].tempAnswer = option.optLetter
					if (this.currentIndex < this.max) {
						setTimeout(() => {
							this.currentIndex += 1
						}, 300)
					}
					// this.onAnswerChange(question)
				}
			},
			/* 选择答案（多选）*/
			chooseMutiSolution(question, option) {
				if (!this.isReviewed) {
					let answerIndex = question.dualChooseArr.indexOf(option.optLetter)
					if (answerIndex > -1) {
						// 该选项已经在数组中了
						question.dualChooseArr.splice(answerIndex, 1)
					} else {
						// 该选项不在数组中
						question.dualChooseArr.push(option.optLetter)
					}
					question.tempAnswer = question.dualChooseArr.join(',')
					// this.onAnswerChange(answerIndex)
					// 强制刷新更新视图
					this.$forceUpdate()
				}
			},
			/* 判断题答案 */
			judgeSolution(question, value) {
				if (!this.isReviewed) {
					// tempAnswer为学生答案
					question.tempAnswer = value
					// 强制刷新更新视图
					this.$forceUpdate()
					if (this.currentIndex < this.max) {
						setTimeout(() => {
							this.currentIndex += 1
						}, 300)
					}
					// this.onAnswerChange(question)
				}
			},

			/* 题目答案变化 */
			onAnswerChange(question) {
				let result = JSON.parse(JSON.stringify(question))
				this.$emit('onChange', question)
			},
			/* 交卷  相同 */
			handleSubmit(submitORimeEnd) {
				/*submitORimeEnd == 1，submit
				  submitORimeEnd == 0，stimeEnd*/
				if (this.currentIndex == 0) {
					this.currentIndex++
				} else {
					this.currentIndex = 0
				}
				if (submitORimeEnd) {
					// this.$emit('submit', this.examDetail.questionList)
					this.$emit('submit')
				} else {
					this.$emit('timeEnd')
				}
			},

			// 点击编辑笔记
			editBtnFunc(question) {
				if (question.theoryExamAnswer.id == undefined) {
					this.$refs.uToast.show({
						title: '未作答的题目不可编辑笔记！',
						type: 'error',
						// url: '/pages/user/index'
					})
					return
				}
				this.isreadOnly = !this.isreadOnly
				this.eidtOrFinishValue = '完成'
			},
			// 完成编辑
			finishBtnFunc(question) {
				var that = this
				this.isreadOnly = !this.isreadOnly
				this.eidtOrFinishValue = '编辑笔记'
				console.log('保存笔记内容', question, that.editorText);
				this.$api.examNote(question.theoryExamAnswer.id, that.editorText)
					.then(res => {
						console.log('更新笔记成功', res)
					})
			},
			updateEditorText(text) {
				// 从子组件获取输入框输入内容
				this.editorText = text
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}

	#header,
	#subHeader {
		height: 100rpx;
	}

	.header {
		width: 750rpx;
		// position: fixed;
		margin-top: 30rpx;
		position: relative;
		text-align: center;
		line-height: 100rpx;
		font-size: 36rpx;
		font-weight: 600;
		color: $theme-color;
		letter-spacing: 10rpx;
		background-color: #FFFFFF;

		&-button {
			width: 80rpx;
			height: 40rpx;
			line-height: 40rpx;
			position: absolute;
			top: 20rpx;
			right: 40rpx;
			padding: 10rpx 20rpx;
			border-radius: 15rpx;
			letter-spacing: 2rpx;
			font-weight: 500;
			color: #FFFFFF;
			background-color: $theme-color;
		}

		.scoreText {
			color: #00b060;
			font-size: 35rpx;
		}
	}

	.sub-header {
		width: 750rpx;
		// position: fixed;
		// margin-top: 130rpx;
		padding: 30rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #000;
		font-size: 33rpx;
		font-weight: bold;
		background-color: #FFFFFF;
	}

	.content {
		// margin-top: 130rpx;
		letter-spacing: 3rpx;

		.typeTag {
			margin-right: 20rpx;
		}

		&-item-explain {
			padding-bottom: 20rpx;
			font-size: 30rpx;
			color: #8799a3;
			letter-spacing: 5rpx;
			border-top: 1px solid rgba(0, 0, 0, 0.1);

			&-result {
				padding: 20rpx 0;

				span {
					padding-left: 20rpx;
					color: #39b54a;
				}
			}

			&-content {
				padding: 20rpx 0;
			}
		}

		&-item {
			padding: 0 20rpx;
			box-sizing: border-box;
		}

		&-title {
			margin-bottom: 30rpx;
			font-size: 32rpx;
			line-height: 55rpx;
			color: #000
		}

		&-solutions {
			width: 100%;
			padding-bottom: 20rpx;

			&-item {
				margin: 40rpx 0;
				border: 5rpx solid $theme-color;
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				font-size: 30rpx;
				background-color: $theme-color;

				&-check-content {
					padding: 35rpx 20rpx;
					width: 100%;
					border-radius: 15rpx;
					color: $theme-color;
					background-color: #FFFFFF;
				}

				&-single {
					width: 80rpx;
					text-align: center;
					color: #FFFFFF;
				}

				&-content {
					padding: 35rpx 20rpx;
					width: 630rpx;
					border-top-right-radius: 15rpx;
					border-bottom-right-radius: 15rpx;
					color: #000;
					background-color: #FFFFFF;
				}

				&-select {
					color: #FFFFFF;
					background-color: $theme-color;
				}
			}

			&-judge {
				display: flex;
				justify-content: space-around;
				background-color: #FFFFFF;
				padding: 20rpx;
				text-align: center;
				font-size: 30rpx;

				.content-solutions-judge-item {
					border: 5rpx solid $theme-color;
					border-radius: 60rpx;
					width: 300rpx;
					padding: 35rpx 20rpx; // 控制单元格的高度
				}

				.content-solutions-judge-select {
					color: #FFFFFF;
					background-color: $theme-color;
				}

			}

			&-blank {
				// border: 5rpx solid $theme-color;
				height: 60rpx;
				width: 90%;
				// border-radius: 20rpx;
				background-color: #FFFFFF;
				padding: 20rpx;
			}

			&-fillItem {
				border: 5rpx solid $theme-color;
				border-radius: 20rpx;
				background-color: #FFFFFF;
				padding: 20rpx;
			}
		}

		.explain {
			border-top: solid #999999 1px;
			padding-top: 10rpx;
			font-size: 28rpx;
			color: #666666;

			.explainResult {
				color: $theme-color;
			}

			.explain-title {
				font-weight: bold;
			}

			.noteArea {
				border-top: 2rpx solid $theme-color;
				padding-top: 10rpx;

				// background-color: #0077AA;
				.noteAreaTitle {
					display: flex;
					justify-content: space-between;
				}
			}
		}
	}

	.footer {
		width: 750rpx;
		height: 100rpx;
		padding: 30rpx 20rpx;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 30rpx;
		box-sizing: border-box;
		color: #4c8af3;
		box-shadow: 0 0 5px 1px #eee;
		background-color: #FFFFFF;

		&-card {
			padding: 10rpx 20rpx;
			border: 1px solid $theme-color;
			border-radius: 15rpx;
			color: #FFFFFF;
			background-color: $theme-color;
		}
	}

	.question-modal {
		width: 700rpx;
		padding: 40rpx;
		background-color: #FFFFFF;

		&-header {
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 35rpx;
			color: #333333;
			border-bottom: 1rpx solid #F0F0F0;
		}

		&-body {

			// margin-bottom: 100rpx;
			.queTypeName {
				font-size: 32rpx;
				font-weight: bold;

			}

			.queTypeArea {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				margin-bottom: 20rpx;

				.question-modal-body-item {
					width: 80rpx;
					height: 80rpx;
					margin: 10rpx 22rpx;
					line-height: 80rpx;
					font-size: 35rpx;
					text-align: center;
					border-radius: 50%;
					color: #ffffff;
					// background-color: #0077AA;
				}
			}

			&-item-unselect {
				// color: #FFFFFF;
				background-color: #bbbbbb;
			}

			&-item-select {
				// color: #FFFFFF;
				background-color: $theme-color;
			}

			&-item-failed {
				color: #FFFFFF;
				background-color: #982121;
			}

			&-item-right {
				color: #FFFFFF;
				background-color: #39b54a;
			}

			&-item-unScored {
				color: #FFFFFF;
				background-color: #ff9f73;
			}
		}

		.question-modal-foot {
			height: 100rpx;
			border-top: 1rpx solid #F0F0F0;
			// position: fixed;
			// margin-bottom: 0rpx;
			margin-top: -60rpx;

			.ansBlock {
				display: flex;
				justify-content: center;

				// align-items: center;
				.blockItem {
					display: flex;
					align-items: center;
					margin: 20rpx;
				}

				.block-ansed {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					background: $theme-color;
					margin: 0 10rpx;
				}

				.block-unansed {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					// border: solid #ffffff 1px;
					background: #bbbbbb;
					margin: 0 10rpx;
				}

				.block-right {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					background: #39b54a;
					margin: 0 10rpx;
				}

				.block-wrong {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					background: #982121;
					margin: 0 10rpx;
				}

				.block-unScored {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					background: #ff9f73;
					margin: 0 10rpx;
				}
			}

		}
	}

	.right {
		border: 8rpx solid #39b54a;
	}

	.wrong {
		border: 8rpx solid #d81717;
	}
</style>
